<template>
  <div>
    <p></p>

    <el-form
      :model="entity"
      :rules="rules"
      ref="form"
      label-width="100px"
      class="dialog-form"
    >
      <el-row :span="24">
        <el-col :span="12">
          <el-form-item v-if="!entity.cardId" label="部门" prop="departmentId">
            <department-select
              v-model="entity.departmentId"
              :clearable="true"
            ></department-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="!entity.cardId" label="员工" prop="employeeId">
            <employee-select
              slot-scope="" disabled
              v-model="entity.employeeId"
              :departmentId="entity.departmentId"
              :clearable="true"
            ></employee-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :span="24">
        <el-col :span="12">
          <el-form-item style="width: 100%" label="员工" prop="name">
            <el-button disabled
              style="width: 100%; color: red"
              type="primary"
              plain
              @click="findEmployee"
            >
              {{ (entity.employee || { name: "-" }).name }}</el-button
            >
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item style="width: 100%" label="状态" prop="status">
            <el-select disabled style="width: 100%" v-model="entity.status">
              <el-option :key="10" :value="10" :label="'10--草稿'"></el-option>
              <el-option
                :key="20"
                :value="20"
                :label="'20--审核中'"
              ></el-option>
              <el-option
                :key="30"
                :value="30"
                :label="'30--审核不过'"
              ></el-option>
              <el-option
                :key="40"
                :value="40"
                :label="'40--审核不过终止'"
              ></el-option>
              <el-option
                :key="50"
                :value="50"
                :label="'50--审核通过'"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item style="width: 100%" label="打卡日期" prop="cardDay"
            ><el-date-picker disabled
              style="width: 100%"
              v-model="entity.cardDay"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="星期" prop="week">
            <el-input disabled placeholder="星期" v-model="entity.week">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="打卡时间" prop="cardTime">
            <el-input disabled placeholder="打卡时间" v-model="entity.cardTime">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="补卡" prop="sCard">
            <el-input disabled placeholder="补卡" v-model="entity.sCard"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="来源类型" prop="sourceType">
            <el-select  style="width: 100%" v-model="entity.sourceType" disabled>
              <el-option :key="10" :value="10" :label="'10--打卡'"></el-option>
              <el-option :key="20" :value="20" :label="'20--补卡'"></el-option>
              <el-option :key="30" :value="30" :label="'30--倒入'"></el-option>
              <el-option
                :key="40"
                :value="40"
                :label="'40--模拟卡'"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="打卡系统" prop="cardSystem">
            <el-select
              disabled
              style="width: 100%"
              v-model="entity.cardSystem"
              disabled
            >
              <el-option
                :key="10"
                :value="10"
                :label="'10--本系统'"
              ></el-option>
              <el-option
                :key="20"
                :value="20"
                :label="'20--钉钉倒入'"
              ></el-option>
              <el-option
                :key="30"
                :value="30"
                :label="'30--企业微信'"
              ></el-option>
              <el-option
                :key="40"
                :value="40"
                :label="'40--打卡数据同步'"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="打卡地点" prop="site">
            <el-input disabled placeholder="打卡地点" v-model="entity.site">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="打卡设备" prop="siteCode">
            <el-input disabled placeholder="打卡设备" v-model="entity.siteCode">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <v-dialog ref="formDiag" :appendToBody="true" title="查找" :width="'48%'">
      <employee-multi-select
        v-model="entity.employeeId"
        :confirmFind="confirmFind"
        :cancelFind="cancelFind"
      >
        <!--<el-button type="primary" @click="$refs.formDiag.dispatch('submit')">确定</el-button>-->
        <!--<el-button type="default" @click="()=>{$refs.formDiag.hide();}">取消</el-button>-->
      </employee-multi-select>
    </v-dialog>
  </div>
</template>
<style lang="less" scoped>
.merchantLogo .el-upload-dragger {
  img {
    height: 200px !important;
  }
}

.dialog-form {
  .el-radio-group {
    .el-radio {
      display: flex;
      align-items: center;
    }

    label {
      height: 40px;
    }
    .group-text {
      display: inline-block;
      width: 100px;
    }
    .title-text {
      display: inline-block;
      width: 120px;
    }
  }
}
</style>

<script>
const defaultEntity = {
  cardId: null, //  刷卡标识
  employeeId: null, //  员工标识
  applyId: 0, //  申请标识
  status: 50, //  状态
  week: "-", //  星期
  cardDay: "2000-01-01 00:00:00", //  打卡日期
  cardTime: null, //  打卡时间
  sCard: "00:00", //  补卡
  sourceType: 20, //  来源类型
  cardSystem: 10, //  打卡系统
  site: null, //  打卡地点
  siteCode: "-", //  打卡设备
  createdAt: null, //  创建时间
};

import DepartmentSelect from "@/components/widgets/hr/DepartmentSelect.vue";
import EmployeeSelect from "@/components/widgets/hr/EmployeeSelect.vue";
import EmployeeMultiSelect from "@/components/widgets/hr/EmployeeMultiSelect.vue";

export default {
  components: { DepartmentSelect, EmployeeSelect, EmployeeMultiSelect },
  data() {
    return {
      parentId: 0,
      ruleTpl: { when: null, then: null },
      entity: _.cloneDeep(defaultEntity),
      dateRange: [],
      oldProps: [],
      ruleDefs: [],
      isDisabled: false,
      limitTotal: false,
      rules: {
        sCard: [
          { required: true, message: "补卡不能为空", trigger: "blur" },
          {
            min: 5,
            max: 5,
            message: "长度 5 个字符",
            trigger: "blur",
          },
        ],
        custName: [
          { required: true, message: "名称不能为空", trigger: "blur" },
          {
            min: 1,
            max: 64,
            message: "长度在 1 到 64 个字符",
            trigger: "blur",
          },
        ],
        startOn: [
          {
            required: true,
            message: "请选择开始时间",
            trigger: "blur",
          },
        ],
        merchantId: [
          {
            type: "number",
          },
        ],
        status: [
          {
            type: "number",
            required: true,
            message: "请选择状态",
            trigger: "change",
          },
        ],
        discountType: [
          {
            type: "number",
            required: true,
            message: "请选择优惠类型",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    findEmployee() {
      //this.classNumber = classNumber;
      this.$refs.formDiag.show();
    },

    confirmFind(row) {
      this.$refs.formDiag.hide();
      this.entity.employeeId = row.id;
      this.$api.hr.EmployeeService.findById(this.entity.employeeId).then(
        (rsp) => {
          if (rsp.data != null) {
            this.entity.employee = rsp.data;
          }
        }
      );
    },
    cancelFind() {
      this.$refs.formDiag.hide();
    },

    getProps(scope) {
      return this.entity.props.filter((p) => p.propScope == scope);
    },
    onRuleDefsLoaded(opts) {
      this.ruleDefs = opts || [];
      this.resetProps();
    },
    onDiscountTypeChange(val) {
      if (val == 3) {
        //次数只能一次
        this.entity.discountValue = 1;
      }
    },
    resetProps() {},
    setValues(vals) {
      this.resetEntity = _.cloneDeep(vals);
      this.entity = _.cloneDeep(this.resetEntity);
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let params = Object.assign({}, this.entity);

          this.$api.attend.attend.EmployeeCardService.save(params).then((rsp) => {
            this.$msgJsonResult(rsp);
            if (rsp.code === 200) {
              this.$emit("saved", rsp);
            }
          });
        }
      });
    },
    resetForm() {
      //this.$refs["form"].resetFields();
      this.entity = _.cloneDeep(defaultEntity);
      if (!this.entity.cardId) {
        this.entity.createdAt = this.$dongxwDict.formatDateZero(new Date());
        this.entity.cardDay = this.$dongxwDict.formatDateZero(new Date());
      }
    },
    init(options) {
      this.resetForm();
      if (options.cardId) {
        this.$api.attend.attend.EmployeeCardService.findById(options.cardId).then(
          (r) => {
            this.entity = r.data;
            if (!this.entity.employee) {
              this.entity.employee = { name: "-" };
            }
          }
        );
        //  console.log(JSON.stringify(this.entity));
      } else {
        if (options.departmentId) {
          this.entity.departmentId = options.departmentId;
        }
        this.isDisabled = false;
      }
    },
  },
  mounted() {
    this.$on("init", this.init);
    this.$on("submit", this.submitForm);
  },
};
</script>
